<template>
  <div class="app-container">
    <auto-three-filter :tage="1" @on-filter="submitFilterForm"/>
    <el-table height="500" :data="tableData.list" v-loading="loading" element-loading-text="加载中..." :row-class-name="tableRowClassName">
      <el-table-column :label="$t('language.finance.withdrawal.requestTime')" width="90" prop="userType" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.billNo')"  width="100" prop="userType" align="center" >
        <template slot-scope="{row}">
          <div :class="{'active': row.splitStatus == 1}">{{row.orderId}}</div>
        </template>
      </el-table-column>
      <!--<el-table-column label="第三方提现单号" width="110" prop="thirdOrderId" align="center" ></el-table-column>-->
      <el-table-column :label="$t('language.finance.withdrawal.splitRelatedTxn')" prop="batchNumber" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.accountType')" prop="userType" align="center">
        <template slot-scope="{row}">
          {{toSwitchData('language.finance.consts.USER_TYPE', row.userType)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.withdrawalType')" prop="aisleType" align="center">
        <template slot-scope="{row}" >
          {{toSwitchData('language.finance.consts.WITHDRAW_TYPE', row.aisleType)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.level')" prop="userLevel" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.accountName')"  prop="username" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.name')" prop="reallyName" align="center">
      </el-table-column>
      <el-table-column sortable :label="$t('language.finance.withdrawal.amount')" width="100" prop="amount" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable :label="$t('language.finance.withdrawal.fee')"  width="90" prop="fee" align="center">
        <template slot-scope="{row}">
          {{row.fee | currency('', 2, {type:1})}}
        </template>
      </el-table-column>
      <el-table-column :sortable="true" :sort-by="formatter" :label="$t('language.finance.withdrawal.payoutConfirmation')"  width="100" prop="moneyCheck" align="center">
        <template slot-scope="{row}">
          {{(row.paragraph) | currency}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.bank')" align="center">
        <el-table-column :label="$t('language.finance.withdrawal.bankName')" prop="bankName" width="100" align="center">
        </el-table-column>
        <el-table-column :label="$t('language.finance.withdrawal.bankCard')"  prop="cardNo" width="160" align="center">
          <template  slot-scope="{row}">
            <span class="clipboard-btn" :data-clipboard-text="row.cardNo" >{{row.cardNo}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="开户行地址" prop="address" width="150" align="center">-->
        <!--</el-table-column>-->
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.payeeName')" width="120" prop="name" align="center">
        <template  slot-scope="{row}">
          <span class="clipboard-btn" :data-clipboard-text="row.name" >{{row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.payoutMerchant')" width="130" prop="merchant" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.payoutMerchantID')" width="180" prop="merchantCode" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.operationEnd')" prop="clientType" align="center">
        <template slot-scope="{row}">
          {{row.clientType | toConverter('PAYMENT_PLATFORM')}}
        </template>
      </el-table-column>
      <!--<el-table-column label="处理人" width="120" prop="seperator" align="center">-->
      <!--</el-table-column>-->
      <!--<el-table-column label="出款时间" width="90" prop="lastUpdate" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.lastUpdate| toTime}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="分单人" width="120" prop="seperateCreator" align="center">-->
      <!--</el-table-column>-->
      <el-table-column :label="$t('language.finance.withdrawal.dispenseTime')" width="90" prop="seperateDate" align="center">
        <template slot-scope="{row}">
          {{row.seperateDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.riskControlApprovalTime')" width="90" prop="riskApvTime" align="center">
        <template slot-scope="{row}">
          {{row.riskApvTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.status')" width="100" prop="status" align="center">
        <template slot-scope="{row}">
          {{ toSwitchData('language.finance.consts.WITHDRAW_STATUS_ONE', row.status) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.remarks')" width="150" prop="remark" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.operation')"  width="230" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-button-group v-if="[0,7,10,11].indexOf(row.status)>-1">
            <el-button type="info"
                       @click="setStep('back');openDialog({dialogName: 'auto-withdraw-dialog', props: row })"
                       v-if="(row.status === 7 || (row.status === 10 && row.onShow))&& roleCheck('auto-return')">{{$t('language.finance.withdrawal.return')}}
            </el-button>
            <el-button type="success"
                       @click="setStep('forceSucc');openDialog({dialogName: 'auto-withdraw-dialog', props: row })"
                       v-if="(row.status === 7 || (row.status === 10 && row.onShow))&& roleCheck('auto-force-success')">{{$t('language.finance.withdrawal.success')}}
            </el-button>
             <el-button type="primary"
                       @click="openDialog({dialogName: 'check-info', props: row })"
                       >{{$t('language.finance.recharge.check')}}
            </el-button>
            <!--<el-button v-if="(row.status === 0 || row.status === 11) && roleCheck('auto-through')" type="warning"-->
                       <!--size="mini"-->
                       <!--@click="setStep('agree');changeStatu(row)" >通过-->
            <!--</el-button>-->
            <!--<el-button v-if="(row.status === 0 || row.status === 11) && roleCheck('auto-refused')" type="danger"-->
                       <!--size="mini"-->
                       <!--@click="setStep('refuse');changeStatu(row)" >拒绝-->
            <!--</el-button>-->
            <!--v-if="row.status === 10"-->
            <!--<el-button v-if="row.status === 10" type="info"-->
                       <!--@click="setStep('success-manual');openDialog({dialogName: 'auto-user-withdraw-dialog', props:row})"-->
                       <!--&gt;手动成功-->
            <!--</el-button>-->
            <!--<el-button v-if="row.status === 10" type="success"-->
                       <!--@click="setStep('fail-manual');openDialog({dialogName: 'auto-user-withdraw-dialog', props: row})"-->
                        <!--&gt;手动失败-->
            <!--</el-button>-->
          </el-button-group>
          <div v-else>
            <el-button type="primary"
                       @click="openDialog({dialogName: 'check-info', props: row })"
                       >{{$t('language.finance.recharge.check')}}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="font-size:12px;margin-top:30px;color:grey;">
      <span>注1：提现拆过单的提现单号，会以淡蓝底色显示；在注单筛选位置输入注单号并勾选关联拆单搜索，即可筛选出晒单相关联的注单</span><br>
      <span>注2：若是一笔人工出款单拆单后进入了不同的页面（审核等等）则可以在相关联的位置进行注单关联搜索</span><br>
      <span>注3：拆单关联号说明，例子：1-2-1（1-代表单个会员拆单数，2-代表此单一共拆成几个提现单，1-代表拆单中的第几单），拆单关联号号码以天为周期</span>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <auto-withdraw-dialog
      v-if="dialogName === 'auto-withdraw-dialog'"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :row-data="dialogProps"
      :step = "step"
      @submit="submitFinished"/>
    <auto-user-withdraw-dialog
      v-if="dialogName === 'auto-user-withdraw-dialog'"
      v-model="dialogVisible"
      :row-data="dialogProps"
      :step = "step"
      @submit="submitFinished"/>
    <auto-normal-withdraw-dialog
      v-if="dialogName === 'auto-normal-withdraw-dialog'"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :row-data="dialogProps"
      :step = "step"
      @submit="submitFinished"/>
     <check-info
      v-if="dialogName === 'check-info'"
      v-model="dialogVisible"
      :orderId="dialogProps.orderId"
     />
  </div>
</template>


<script>
import { getWithdrawList, seperatorOperation } from '@/services/api/withdraw';
import {
  grid, constsLabel, dialog, switchData,
} from '@/build';
import AutoThreeFilter from '@/views/finance/withdraw/autoThreeFilter';
import NormalWithdrawDialog from '@/views/finance/withdraw/normalWithdrawDialog';
import AutoWithdrawDialog from '@/views/finance/withdraw/autoWithdrawDialog';
import AutoNormalWithdrawDialog from '@/views/finance/withdraw/autoNormalWithdrawDialog';
import AutoUserWithdrawDialog from '@/views/finance/withdraw/autoUserWithdrawDialog';
import CheckInfo from '@/views/finance/withdraw/checkInfo';

export default {
  name: 'withdraw-normal',
  components: {
    NormalWithdrawDialog, AutoThreeFilter, AutoWithdrawDialog, AutoNormalWithdrawDialog, AutoUserWithdrawDialog, CheckInfo,
  },
  mixins: [grid, constsLabel, dialog, switchData],
  data() {
    return {
      activeClass: 'active',
      tableData: {},
      rowData: {},
      filters: {
        size: 20,
        page: 1,
        withdrawType: 1,
        status: ['7', '3', '6', '-3', '0', '10', '11'],
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        // splitType:undefined,
        userLevel: [],
        dateType: 1,
        searchType: 2,
        splitStatus: -1,
      },
      dialogVisible: false,
      step: 'agree',
      type: 1,
      orderId: '',
      seperatorObj: {},
    };
  },

  methods: {
    tableRowClassName({ row }) {
      if (row.dealWithStatus == 1) {
        return 'warning-row';
      }
      return '';
    },
    setStep(step) {
      this.step = step;
    },
    formatter(row, column) {
      return row.paragraph;
    },
    changeStatu(row) {
      this.orderId = row.orderId;
      this.type = 1;
      this.doGet({ action: 'setGrid' });
      this.openDialog({ dialogName: 'auto-normal-withdraw-dialog', props: row });
    },
  },
  mounted() {
    this.bindGet(getWithdrawList, 'tableData', {
      action: 'getGrid',
      beforeSend: (data) => {
        if (data.splitType) {
          data.splitType = 1;
        } else {
          data.splitType = undefined;
        }
        if (data.userLevel.length > 0) {
          data.userLevel = data.userLevel.join(',');
        }

        data.status = data.status.join(',');
        delete data.time;
        return data;
      },
      sendingData: 'filters',
      format: (data) => {
        if (data && data.list) {
          data.list.forEach((v, k) => {
            this.$set(v, 'paragraph', v.amount - v.fee);
            // this.$set(v,'splitType',1)
          });
          return data;
        }
        return [];
      },
    });
    this.bindGet(seperatorOperation, 'seperatorObj', {
      action: 'setGrid',
      beforeSend: () => ({
        type: this.type,
        orderId: this.orderId,
      }),
      format: () => {
        this.gridSearch();
      },
    });
    this.doGet({ action: 'getGrid' });
    // this.submitFilterForm(this.filters);
  },
};
</script>

<style lang="scss" scoped>
  .active{
    color:#F4A460;;
  }
  .app-container .el-table /deep/ .warning-row {
    background-color: oldlace !important;
  }
  /deep/ thead .cell{word-break:break-word;}
</style>
